<script setup lang="ts">
import { ref, reactive } from "vue";
import { queryExchangeList, handleExchange } from "@/api/shop";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
import type { UploadProps } from "element-plus";

defineOptions({
  name: "exchange"
});
const currentPage = ref(1);
const pageSize = ref(10); // 添加这行

const pageTotal = ref(0);
let tableData = ref([]);
const type = ref("");
let previewUrl = ref("");
const queryParams = reactive({
  phoneNum: ""
});
//初始化列表
queryListTableData();

//查询列表
function queryListTableData(params?) {
  const _params = {
    pageNo: 1,
    pageSize: 10,
    total: 0,
    ...params
  };
  if (queryParams.phoneNum) {
    _params.phoneNum = queryParams.phoneNum;
  }
  queryExchangeList({ ..._params }).then((res: any) => {
    console.log(res, "res");
    tableData.value = res.data.data;
    pageTotal.value = res.data.total;
  });
}
//筛选
const ruleFormRef = ref<FormInstance>();
//重置
const onReset = () => {
  ruleFormRef.value?.resetFields();
  queryParams.phoneNum = "";
  queryListTableData();
};

//立即兑换
const handleStatus = async row => {
  console.log(row, "row");
  ElMessageBox.confirm("确认是否立即兑换?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    handleExchange({
      id: row.id
    })
      .then((res: any) => {
        console.log(res);
        ElMessage({
          type: "success",
          message: "兑换成功"
        });
        queryListTableData();
      })
      .catch((err: any) => {
        console.log(err);
        ElMessage({
          type: "error",
          message: err.message
        });
      });
  });
};

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  queryListTableData(val);
};

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  queryListTableData(val);
};
function handleClose() {
  console.log("关闭");
  addRoleDialogVisible.value = false;
  detailDialogVisible.value = false;
}


</script>
<template>
  <div class="statement">
    <div class="search">
      <div class="c-input">
        <el-input
          v-model="queryParams.phoneNum"
          clearable
          placeholder="请输入手机号"
        />
      </div>
      <div class="search-btn">
        <el-button type="primary" size="large" @click="queryListTableData"
          >查询</el-button
        >
        <el-button size="large" @click="onReset">重置</el-button>
      </div>
    </div>
    <!-- <div class="add">
      <el-button type="primary" size="large" @click="handleAdd('add')"
        ><el-icon> <Plus /> </el-icon>新增充值</el-button
      >
    </div> -->
    <div class="c-page__bg">
      <el-table :data="tableData" >
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="goodsName" label="商品信息" />
        <el-table-column prop="phoneNum" label="用户手机号码" />
        <el-table-column prop="statusName" label="状态" />
        <el-table-column prop="usePoints" label="积分数量" />        
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="expiredTime" label="到期时间" />       
        <el-table-column prop="receivedTime" label="领取时间" />
        <el-table-column #default="{ row }" label="操作" width="200">
          <span
            v-if="row.status == 'TO_BE_RECEIVED'"
            class="c-text-primary"
            @click="handleStatus(row)"
            >立即兑换</span
          >
        </el-table-column>
      </el-table>
      <div class="pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="pageTotal"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 50]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.statement {
  height: 100%;
  overflow: hidden;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}

.search {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 8px;
  display: flex;
  // align-items: center;
  flex-wrap: wrap;
  .c-input {
    width: 240px !important;
    margin-bottom: 16px;
    margin-right: 16px;
    --el-border-radius-base: 8px;
    --el-input-focus-border-color: var(--main-color) !important;
    --el-component-size: 40px;
  }

  .search-btn {
    padding-left: 15px;
    .c-btn {
      height: 38px;
      border-radius: 8px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    }
  }
}

.c-page__bg {
  width: 100%;
  height: 100%;
  margin-top: 25px;
  padding-bottom: 24px;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.c-text-primary {
  font-size: 14px;
  color: #1c9fff;
  white-space: nowrap;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}

.pagination-block {
  padding-top: 20px;
  padding-right: 10px;
  display: flex;
  justify-content: flex-end;
}

.c-dot-success,
.c-dot-info {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #43bf0a;
}

.c-dot-info {
  background-color: #bfbfbf;
}

.system-icon-content {
  min-height: 500px;
}

.flex-row {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: #262626;
}

.back {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #1c9fff;

  .back-text {
    display: flex;
    align-items: center;
    padding-right: 5px;
    font-size: 16px;
    cursor: pointer;
  }

  .title {
    color: #8c8c8c;
    font-size: 16px;
  }
}
.c-drawer-form {
  .c-info__title {
    margin-top: 20px;
    margin-bottom: 20px;
    color: #262626;
    font-size: 16px;
  }
  .el-form-item {
    margin-left: 60px;
    margin-bottonm: 10px;
  }
}
.el-drawer__header {
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdcdc;
  margin-bottom: 0;
}
.upload-text {
  font-size: 14px;
  color: #909399;
  margin-top: 8px;
  text-align: center;
}

// ... 上传图片 ...

.avatar-uploader,
.qrcode-uploader {
  :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);

    &:hover {
      border-color: var(--el-color-primary);
    }
  }
}

.required-label::before {
  content: "*";
  color: var(--el-color-danger);
  margin-right: 4px;
}

// ... 其他样式 ...
.qrcode-uploader-icon,
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 80px;
  text-align: center;
  line-height: 100px;
}

.qrcode,
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
